<template>
  <Layout style="height: 100%">
    <HHeader style="background: white;padding-top: 10px">
      <div style="line-height: 35px;padding-left:20px ">
        运行状态 ：<input type="text" v-model="status" style="width:50px;border:none;" readonly/>
        路径 ：<input type="text" v-model="path" style="width:300px"/>
        <Button @click="ngxCmd('start')">启动</Button>
        <Button @click="ngxCmd('stop')">停止</Button>
        <Button @click="ngxCmd('reload')">重新载入配置</Button>
        <Button @click="saveCfg">保存配置</Button>
        <Button @click="previewCfg">预览配置</Button>
      </div>
    </HHeader>
    <Content style="padding-top: 10px">
      <MonacoEditor style="height: 100%" :value="config" language="nginx" ref="editor"  @save="saveConfig"/>
    </Content>
    <Modal v-model="showPreview" :hasCloseIcon="true" :hasDivider="true" :closeOnMask="false" :fullScreen="true">
      <div slot="header">预览</div>
      <MonacoEditor style="height: 100%" language="nginx" :value="source" ref="editor"></MonacoEditor>
      <div slot="footer">
        <button class="h-btn" @click="showPreview=false">关闭</button>
      </div>
    </Modal>
  </Layout>
</template>
<script>
import {ajax} from 'framework'

export default {
  name: "Nginx",
  data() {
    return {
      showPreview:false,
      status: "停止",
      path: "path",
      config: '',
      source: ''
    }
  }, mounted() {
    ajax.get("system/nginxCfg").then(d => {
      this.path = d.data.path;
      this.config = d.data.config;
    })
    this.ngxStatus();
  },
  methods: {
    ngxStatus() {
      ajax.get("system/nginxStatus").then(d => {
        this.status = d.data;
      })
    },
    ngxCmd(cmd) {
      ajax.post("system/nginxCmd", {cmd: cmd}).then(r => {
        this.ngxStatus();
        this.$Message(r.data);
      }).catch(e => {
        this.$Modal({title: "错误信息", content: e.description.replace(/\n/g, '<br/>')});
      })
    },
    saveConfig(cfg) {
      ajax.post("system/nginxCfg", {path: this.path, config: cfg}).then(r => {
        this.$Message("已保存")
      })
    },
    saveCfg(){
      this.$refs.editor.save()
    },
    previewCfg(){
      ajax.post("system/nginxPreviewCfg",).then(r => {
       this.source=r.data
        this.showPreview=true
      })
    }
  }
}
</script>
